<script setup lang="ts">
import BannerTop from '@/components/home/bannerTop.vue'
import CardEl from '@/components/home/cardEl.vue'
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main id="main">
          <BannerTop />
          <br />
          <CardEl #default="{ item }">
            <el-card style="max-width: 480px">
              <template #header>
                <div class="card-header">
                  <span>{{ item.title }}</span>
                </div>
              </template>
              <div class="card-body">
                <img :src="item.imgSrc" :alt="item.alt" />
              </div>
              <template #footer>{{ item.authName }}</template>
            </el-card>
          </CardEl>
        </el-main>
        <el-aside width="200px">Aside</el-aside>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
#main {
  width: 100%;
  min-width: 1000px;
}
::v-deep(.el-card__body) {
  padding: 0;
}
.el-card {
  text-align: center;

  .card-body {
    height: 180px;
  }
  img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
</style>
